<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<script type="application/javascript">

    $(function () {

        //1:----------------原始方式----------------
        /*
       $("#myDiv").on("mouseover",function () {
           $(this).css("backgroundColor","green");
       });
        $("#myDiv").on("mouseout",function () {
            $(this).css("backgroundColor","blue");
        });
        */
        //2:----------------链式方式----------------

        $("#myDiv").on("mouseover",function () {
            $(this).css("backgroundColor","green");
        }).on("mouseout",function () {
            $(this).css("backgroundColor","red");
        });

        //3:----------------切换方式----------------
        /*
        $("#myDiv").hover(function () {
            $(this).css("backgroundColor","green");
        },function () {
            $(this).css("backgroundColor","blue");
        });
        */
    });



</script>
<body>

<div id="myDiv" style="width:300px;height:300px;background:red">鼠标移入变成绿色，
    移出回复红色</div>

</body>
</html>